<script lang="ts" setup>

const emit = defineEmits(['change', 'itemClick'])
const props = defineProps({
  source: {
     type: Array,
    default: function() {
      return []
    }
  }
})
const itemHandler = (val:any) => {
  emit('itemClick', val)
  emit('change', val)
}
const iconStyle = (item:any) => {
  const re:any = {}
  if (item.color) re.background = `linear-gradient(${item.color})`
  if (item.border)re.border = `border: 1px solid ${item.border}`
  return re
}
</script>

<template>
  <el-dropdown-menu>
    <el-dropdown-item v-for="item of source"
                      :divided="item.divided"
                      @click="itemHandler(item)">
      <div class="down-menu-item-box">
        <v-icon v-if="item.icon" class="item-icon" :icon="item.icon" />
        <v-svg-icon v-else-if="item.svg" class="item-svg" :icon="item.svg" />
        <div v-else-if="item.color" class="item-color" :style="iconStyle(item)" />
        <img v-else-if="item.img" class="item-img" :src="item.img" />
        <div class="item-lb">
          {{ item.label }}
        </div>
      </div>
    </el-dropdown-item>
  </el-dropdown-menu>
</template>

<style scoped lang="scss">


.down-menu-item-box{
  @include hor-group();
  flex:none;
  width:100%;
  .item-icon{
    flex:none;
    font-size:15px;
  }
  .item-svg{
    flex:none;
    width:16px;
    height:16px;
  }
  .item-color{
    width: 16px;
    height: 16px;
    border-radius: 50%;
  }
  .item-img{
    flex:none;
    width:16px;
    height:16px;
  }
  .item-lb{
    flex:none;
    padding: 0 0 0 10px;
    box-sizing: border-box;
  }
}
</style>
